<!DOCTYPE html>
<html xmlns="http://java.sun.com/jsf/composite">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>问卷管理</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
</head>
<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form">
            <div class="search-cont clearfix" id="tool">
                <div class="operation-btn-cont">
                    <div class="operright cyt-retract-close hideMenu"> 收起筛选<i class="iconfont">&#xe658;</i></div>
                    <div class="operright cyt-retract-open showMenu" style="display: none;"> 展开筛选<i class="iconfont">&#xe936;</i></div>
                    <!--button开始-->
                    <button class="layui-btn layui-btn-normal layui-btn-mid" type="button" id="addBtn"><i class="iconfont marr5">&#xe65e;</i>新建</button>
                    <!--<button class="layui-btn layui-btn-normal layui-btn-mid" type="button" id="editBtn"><i class="iconfont marr5">&#xe606;</i>编辑</button>-->
                    <!--button结束-->
                    <div class="triangle-bottom"></div>
                    <div class="triangle-top"></div>
                </div>
                <div class="search-details">
                    <div class="layui-form-item marb5">
                        <!--search开始-->
                        <div class="layui-inline">
                            <label class="layui-form-label">标题：</label>
                            <div class="layui-input-inline">
                                <input type="text" id="title" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类型：</label>
                            <div class="layui-input-inline">
                                <select name="type" id="type">
                                    <option value="">全部</option>
                                    <option value="1">扫码问卷</option>
                                    <option value="2">对象问卷</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态：</label>
                            <div class="layui-input-inline">
                                <select name="status" id="status">
                                    <option value="">全部</option>
                                    <option value="1">编辑中</option>
                                    <option value="2">未开始</option>
                                    <option value="3">发布中</option>
                                    <option value="4">已结束</option>
                                </select>
                            </div>
                        </div>
                        <!--search结束-->
                        <div class="layui-inline marl8">
                            <button class="layui-btn layui-btn-normal" type="button" id="searchBtn">搜索</button>
                            <button class="layui-btn layui-btn-normal" type="button" id="resetBtn">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="wrap-container welcome-container" id="showTable">

        </div>
        <div id="page">

        </div>
        <!--<div class="layui-form" id="table-list">-->
            <!--<table id="entityList" lay-filter="entityList" class="cy-list-table"></table>-->
        <!--</div>-->
    </div>
</div>
<script src="${s.base}/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    var tableIns = null;
    var page = null;
    var baseutil = null;
    var layer = null;
    var dialog = null;
    var form = null;
    var curr = 1;// 当前页，初始值设为 1
    var limit = 10;// 每页条数，初始值设为 10
    var total;// 总记录数

    layui.use(['jquery', 'table', 'page', 'dialog', 'baseutil','form','layer'], function () {
        page = layui.page;
        baseutil = layui.baseutil;
        dialog = layui.dialog;
        layer = layui.layer;
        form = layui.form;

        getInfo();// 获取数据
        toPage();// 进行分页
    });

    var applyId = '${applyId}';

    var index ;
    function getInfo() {
        var title = $("#title").val();
        var status = $("#status").val();
        var type = $("#type").val();
        index = layer.load(2)
        $.ajax({
            type: "post",
            url: "/work/question/page",
            async: false,// 设置同步请求，加载数据前锁定浏览器
            dataType: 'json',
            data: {
                "page": curr, // 查询页码
                "limit": limit, // 每页条数
                "title":title,
                "applyId":applyId,
                "status":status,
                "type":type
            },
            success: successFu
        });
    }

    // 数据请求成功
    function successFu(pager) {
        layer.close(index);
        //console.log(data);
        // 1.清空原数据
        $("#showTable").html("");
        // 2.重新赋值页码、条数、总记录数

        // limit = pager.limit;
        total = pager.count;
        // 3.渲染数据
        // 当前查询无数据时
        if (pager.total == 0) {
            // $("tbody").html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
            return;
        }
        /*if (pager.hasNextPage) {
            curr = curr + 1;
        }*/
        var text = "";
        $.each(pager.data, function (i, item) {
            // 状态
            var statusStr="";
            var buttonStr="";
            var rightStatusStr="";
            if(item.status== "1"){
                statusStr='<div class="quest-status quest-status-yellow">编辑中</div>';
                buttonStr='<li class="quest-border-blue edit-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe679;</i>\
                    <span >编辑问卷</span>\
                    </li>\
                    <li class="quest-border-blue publish-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe67a;</i>\
                    <span >发布问卷</span>\
                    </li>\
                    <li class="noclick" >\
                    <i class="iconfont">&#xe677;</i>\
                    <span id="total">统计问卷</span>\
                    </li>\
                    <li class="quest-border-blue show-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe67b;</i>\
                    <span >查看问卷</span>\
                </li>';
                rightStatusStr='<li class="delquest quest-status-blue" data-id="'+item.id+'"><i class="iconfont">&#xe65b;</i></li>\
                        <li class="copyquest" data-id="'+item.id+'"><i class="iconfont">&#xe680;</i></li>\
                        <li class="quest-status-grey" data-id="'+item.id+'"><i class="iconfont">&#xe65d;</i></li>';
            }else if(item.status== "2"){
                statusStr='<div class="quest-status quest-status-green">未开始</div>';
                buttonStr='<li class="noclick" >\
                    <i class="iconfont">&#xe679;</i>\
                    <span >编辑问卷</span>\
                    </li>\
                    <li class="noclick" >\
                    <i class="iconfont">&#xe67a;</i>\
                    <span >发布问卷</span>\
                    </li>\
                    <li class="noclick">\
                    <i class="iconfont">&#xe677;</i>\
                    <span id="total">统计问卷</span>\
                    </li>\
                    <li class="quest-border-blue show-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe67b;</i>\
                    <span >查看问卷</span>\
                </li>';
                rightStatusStr='<li class="quest-status-grey" data-id="'+item.id+'"><i class="iconfont">&#xe65b;</i></li>\
                        <li class="copyquest" data-id="'+item.id+'"><i class="iconfont">&#xe680;</i></li>\
                        <li class="quest-status-grey" data-id="'+item.id+'"><i class="iconfont">&#xe65d;</i></li>';
            }else if(item.status== "3"){
                statusStr='<div class="quest-status quest-status-blue">发布中</div>';
                buttonStr='<li class="noclick" >\
                    <i class="iconfont">&#xe679;</i>\
                    <span >编辑问卷</span>\
                    </li>\
                    <li class="noclick" >\
                    <i class="iconfont">&#xe67a;</i>\
                    <span >发布问卷</span>\
                    </li>\
                    <li class="quest-border-blue total-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe677;</i>\
                    <span id="total">统计问卷</span>\
                    </li>\
                    <li class="quest-border-blue show-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe67b;</i>\
                    <span >查看问卷</span>\
                </li>';
                rightStatusStr='<li class="quest-status-grey" data-id="'+item.id+'"><i class="iconfont">&#xe65b;</i></li>\
                        <li class="copyquest" data-id="'+item.id+'"><i class="iconfont">&#xe680;</i></li>\
                        <li class="dropout" data-id="'+item.id+'"><i class="iconfont">&#xe65d;</i></li>';
            }else if(item.status== "4"){
                statusStr='<div class="quest-status quest-status-grey">已结束</div>';
                buttonStr='<li class="noclick" >\
                    <i class="iconfont">&#xe679;</i>\
                    <span >编辑问卷</span>\
                    </li>\
                    <li class="noclick" >\
                    <i class="iconfont">&#xe67a;</i>\
                    <span >发布问卷</span>\
                    </li>\
                    <li class="quest-border-blue total-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe677;</i>\
                    <span id="total">统计问卷</span>\
                    </li>\
                    <li class="quest-border-blue show-question" data-id="'+item.id+'" data-status="'+item.status+'">\
                    <i class="iconfont">&#xe67b;</i>\
                    <span >查看问卷</span>\
                </li>';
                rightStatusStr='<li class="delquest quest-status-blue" data-id="'+item.id+'"><i class="iconfont">&#xe65b;</i></li>\
                        <li class="copyquest" data-id="'+item.id+'"><i class="iconfont">&#xe680;</i></li>\
                        <li class="quest-status-grey" data-id="'+item.id+'"><i class="iconfont">&#xe65d;</i></li>';
            }
            var typeStr="";
            var objectTypeStr = "";
            // 进度条
            var allCount = item.allCount;
            var alreadyCount = item.alreadyCount;
            var rate = 0;
            var rateStr = '';
            if (item.type == "1") {
                typeStr="扫码问卷";
                objectTypeStr="扫码用户";
                rate="0"
                if(item.status== "4"){
                    rateStr = '<div class="top-load" style="width:100%!important;text-align: center">已结束</div>';
                }else if (item.status== "1") {
                    rateStr = '<div class="top-load" style="width:100%!important;text-align: center;display: none"></div>';
                }else{
                    rateStr = '<div class="top-load" style="width:100%!important;text-align: center">正在进行中</div>';
                }
            } else if (item.type == "2") {
                typeStr="对象问卷";
                if (item.objectType == "1") {
                    objectTypeStr="所有人";
                } else if (item.objectType == "2") {
                    objectTypeStr="教师";
                } else if (item.objectType == "3") {
                    objectTypeStr="学生";
                } else if (item.objectType == "4") {
                    objectTypeStr="自定义对象";
                }
                if (allCount == 0) {
                    if (item.status== "1") {
                        rateStr = '<div class="top-load" style="width:100%!important;text-align: center;display: none"></div>';
                    }else{
                        rateStr = '<div class="top-load" style="width:100%!important;">100%</div>';
                    }
                } else {
                    rate = (alreadyCount/allCount).toFixed(2)*100;
                    if (item.status== "1") {
                        rateStr = '<div class="top-load" style="width:100%!important;text-align: center;display: none"></div>';
                    }else{
                        rateStr = '<div class="top-load" style="width:'+rate+'%!important;">'+rate+'%</div>';
                    }
                }
            }
            // 权限控制
            text+='<div class="questionnaire-list-ctn clearfix">\
                <div class="welcome-left-container col-lg-8" style="padding-left:0;">\
                <div class="questionnaire-left clearfix">'+statusStr+'\
                <div class="questionnaire-left-name">'+item.title+'</div>\
                <div class="questionnaire-left-style">类型：<span>'+typeStr+'</span></div>\
            <div class="questionnaire-left-four">\
                <ul>'+buttonStr+'</ul>\
                </div>\
                </div>\
                </div>\
                <div class="welcome-left-container col-lg-4">\
                <div class="questionnaire-right clearfix">\
                <div class="questionnaire-right-top clearfix">\
                <ul>'+rightStatusStr+'';
            if (item.type == "1") {
                text+='<li class="questewm" data-sort="'+i+'" ><div class="questewm-ctn " style="display: none;" ><img src="'+item.qrCode+'"></div> <i class="iconfont">&#xe7dd;</i></li>';
            }
            text+='</ul>\
            </div>\
            <div class="questionnaire-right-load supervise-question" data-id="'+item.id+'">\
                '+rateStr+'\
                </div>\
                <p>开放时间：<span>'+item.startTime+'—'+item.endTime+'</span></p>\
            <p>对象：<span>'+objectTypeStr+'</span></p>\
            </div>\
            </div>\
            </div>';
        });
        $("#showTable").html(text);
    }
    // 查询
    $('#searchBtn').bind('click', function () {
        getInfo();// 获取数据
        toPage();// 进行分页
    });
    // 重置
    $('#resetBtn').bind('click', function () {
        $("#title").val("");
        //$("#status").find("option[value='']").attr("selected",true);
        $("#type").val("");
        $("#status").val("");
        form.render();

        getInfo();// 获取数据
        toPage();// 进行分页
    });
    // 新建
    $('#addBtn').bind('click', function () {
        var id=parent.getTabId();
        page.edit('questionEdit', '/work/question/getEdit?parentMenuId='+id+"&applyId="+applyId, '问卷添加');
    });
    // 编辑问卷
    $('#showTable').on('click','.edit-question', function () {
        var status = $(this).attr("data-status");
        if (status === '1') {
            var id = $(this).attr("data-id");
            var menuId=parent.getTabId();
            page.edit("edit"+id, '/work/question/getEdit?id=' + id+"&parentMenuId="+menuId+"&applyId="+applyId, '问卷编辑');
        } else {
            dialog.msg("请选择状态为编辑中的问卷");
            return false;
        }
    });
    // 发布
    $("#showTable").on("click",".publish-question",function () {
        var id = $(this).attr("data-id");
        var status = $(this).attr("data-status");
        var menuId=parent.getTabId();
        page.edit("publish"+id, '/work/question/getPublish?id=' + id+"&parentMenuId="+menuId+"&applyId="+applyId, '问卷发布');
    });
    // 统计
    $("#showTable").on("click",".total-question",function () {
        var id = $(this).attr("data-id");
        var status = $(this).attr("data-status");
        var menuId=parent.getTabId();
        page.edit("total"+id, '/work/question/getTotal?id=' + id+"&parentMenuId="+menuId, '问卷统计');
    });
    // 查看
    $("#showTable").on("click",".show-question",function () {
        var id = $(this).attr("data-id");
        var status = $(this).attr("data-status");
        var menuId=parent.getTabId();
        page.edit("show"+id, '/work/question/getShow?id=' + id+"&parentMenuId="+menuId, '问卷查看');
    });
    // 删除
    $("#showTable").on("click",".delquest",function () {
        page.delete('/work/question/deleteQuestion', {"id": $(this).attr("data-id")}, "您确定要删除吗？", function () {
            getInfo();// 获取数据
            toPage();// 进行分页
        });
    });
    // 复制
    $("#showTable").on("click",".copyquest",function () {
        page.editPopup('/work/question/getQuestionCopy?id=' + $(this).attr("data-id"), '复制问卷','700px','400px');
    });
    // 监管
    $("#showTable").on("click",".supervise-question",function () {
        var id = $(this).attr("data-id");
        var menuId=parent.getTabId();
        page.edit("supervise"+id, '/work/question/getSupervise?id=' + id+"&parentMenuId="+menuId, '问卷监管');
    })
    // 结束
    $("#showTable").on("click",".dropout",function () {
        page.delete('/work/question/finish', {"id": $(this).attr("data-id"), status: '4'}, "您确定要结束该问卷吗？", function () {
            getInfo();// 获取数据
            toPage();// 进行分页
        });
    });
    //二维码
    $("#showTable").on("click",'.questewm',function(){
        var index=$(this).attr("data-sort");
        // $(".questewm-ctn").hide();
        // $(".questewm-ctn").removeClass("tg");
        var flag = false;
        if($(this).parent().find(".questewm-ctn").is(":visible")){
           flag = true;
        }
        $(".questewm-ctn").hide();
        if (flag) {
            $(this).parent().find(".questewm-ctn").show();
        }
        if(index==0||index==1){
            $(this).parent().find(".questewm-ctn").addClass("posi-bot").toggle();
        } else{
            $(this).parent().find(".questewm-ctn").toggle();
        }
    })

    // 进行分页
    function toPage() {
        // 调用分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            // 调用分页
            laypage.render({
                // 分页容器的id
                elem: 'page',// *必选参数
                // 数据总数，从服务端得到
                count: total,// *必选参数
                // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                //limit:limit,
                // 起始页
                //curr:Pager,
                // 连续出现的页码个数
                //groups:5,
                // 自定义每页条数的选择项
                limits: [10, 25, 50, 100],
                // 自定义首页、尾页、上一页、下一页文本
                first: '首页',
                last: '尾页',
                prev: '<em><<</em>',
                next: '<em>>></em>',
                // 自定义主题
                theme: "#FF5722",
                // 自定义排版
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                // 渲染数据
                jump: function (data, first) {
                    // data包含了当前分页的所有参数
                    curr = data.curr;
                    limit = data.limit;

                    // 首次不执行
                    if (!first) {
                        getInfo();
                    }
                }
            });
        })
    }
</script>
</body>
</html>